<template>
  
        <!-- <div class="input-root">
            
        </div> -->
        <div class="InputArea">
            <!-- placeholder="请输入内容" -->
                
                <textarea
                  ref="textareaRef" 
                  v-model="content" 
                  class="input-item"
                  :rows="rows">
                </textarea>
                
              <div class="toolList">
                  <el-button class="tool-list-button" @click="getContent"  type="primary">发送</el-button>
              </div>
          </div>
            
    

</template>
<script setup lang="js">

import {ref, watch, nextTick, onMounted} from 'vue'
const textareaRef = ref(null);
const rows = ref(1)
const content = ref('')

onMounted(() => {
  nextTick(adjustTextareaSize);
});

watch(() => content.value, () => {
  nextTick(adjustTextareaSize);
})

// 参考vant组件库中的field组件
const adjustTextareaSize = () => {
  let textarea =textareaRef.value;

  
  textarea.style.height = 'auto'; 
  const height = textarea.scrollHeight;
  

  if (height) { // 改变textarea高度达到自适应
    textarea.style.height = height + "px";
    
  }
}

</script>
  
<style scoped>

.InputArea {
    width: 60%;
    height: auto;
    max-height: 300px;
    background-color:  rgb(243, 243, 243);
    border: #007 solid 1px;
    border-radius: 10px;
    position: fixed;
    bottom:5%;
    left: 50%;
    transform: translateX(-50%);
    
    min-width: 300px;
    z-index: 1000;
    
    display: flex;
    flex-direction: column; /* 新增：垂直排列 */
    align-items: center; /* 新增：居中对齐 */
    gap: 10px; /* 新增：子元素间距 */
    overflow: hidden;
    /* 响应式调整 */
    @media (max-width: 992px) {
        width: 75%;
    }
    @media (max-width: 768px) {
        width: 90%;
        min-width: unset;
    }
    @media (max-width: 480px) {
        width: 100%;
        border-radius: 0;
        bottom: -5px;
    }
}
  .input-item {
  /* 保持原有基础样式 */
  width: calc(100% - 10px);
  height: 120%;
  position: static;
  margin-bottom: 0px;
  border-radius: 10px;
  border-color: rgb(243, 243, 243);
  background-color: rgb(243, 243, 243);
  /* 修改布局属性 */
  display: block; /* 改为块级元素 */
  white-space: pre-wrap; /* 允许保留换行符 */
  word-wrap: break-word; /* 超出宽度自动换行 */
  resize:none;
  
  overflow-y:auto; /* 添加垂直滚动条 */
  padding: 5px 1px; /* 增加内边距 */
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
  scrollbar-color: #007 rgb(237, 237, 237);
  @media (max-width: 768px) {
    /* 保持原有响应式修改 */
    min-height: 60px;
    width: calc(100% - 10px);
  }
}
.input-item:focus {
  
    outline: none;
    border: 1px solid none; /* 保持相同边框宽度 */
}
.toolList{
    width: 100%; /* 新增：撑满容器宽度 */
    height: 40px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    /* 新增：自动顶部外边距保持底部定位 */
    padding-bottom: 5px; /* 新增：保持底部间距 */
}
.blankArea{
    width: 100%;
    height: 100%;
    margin-top: -1px;
    background-color: rgb(255, 255, 255);
}
.tool-list-button{
    margin-right: 10px;
}
</style>